<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
</head>
<body>

<div class="demoTable" style="margin-left: 20px;margin-top: 15px">
    搜索角色名：
    <div class="layui-inline">
        <input class="layui-input" name="roleName" id="roleName" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="rolelist" lay-filter="rolelist"></table>


<!--<div class="layui-btn-group demoTable">-->
<!--    <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>-->
<!--    <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>-->
<!--    <button class="layui-btn" data-type="isAll">验证是否全选</button>-->
<!--</div>-->
<script type="text/html" id="reoleUtil">

    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="/static/layui/layui.js"></script>
<script src="/static/js/axios.js"></script>
<script>
    layui.use(['element', 'jquery', 'table'], function () {
        const element = layui.element,
            $ = layui.$,
            table = layui.table;
        table.render({
            elem: '#rolelist'
            , url: '/user-role/roleList'
            // , toolbar: true
            , title: '用户数据表'
            , height: 'full'
            , id: 'rolelist'
            // , totalRow: true
            , page: true//开启分页
            , cellMinWidth: 150
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'roleId', width: 80, title: 'ID', sort: true, width: '10%', fixed: 'left'}
                    , {field: 'roleName', title: '角色名'}
                    , {
                    field: 'createTime',
                    title: '创建时间',
                    templet: '<div>{{ layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss") }}</div>'
                }
                    , {
                    field: 'updateTime',
                    title: '修改时间',
                    templet: '<div>{{ layui.util.toDateString(d.updateTime, "yyyy-MM-dd HH:mm:ss") }}</div>'
                }
                    , {fixed: 'right', title: '操作', toolbar: '#reoleUtil', width: 150, fixed: 'right'}
                ]
            ]
            , response: {
                statusCode: 200 //重新规定成功的状态码为 200
            }
            , parseData: function (res) { //数据解析
                if (res.code == -1) {
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                    };
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.result.total, //解析数据长度
                    "data": res.result.records //解析数据列表
                };
            },

        });
        const active = {
            reload: function () {
                const roleName = $('#roleName');
                //执行重载
                table.reload('rolelist', {
                    where: {
                        roleName: roleName.val()
                    }
                });
            }
        };


        //监听行工具事件
        table.on('tool(rolelist)', function (obj) {
            var data = obj.data;

            // var checkStatus = table.checkStatus(obj.config.id);
            // console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: '/user-role/delete_role',
                        type: 'post',
                        dataType: 'json',
                        contentType: 'application/json',
                        data: JSON.stringify(data),
                        success: function (result) {
                            if (result.code == 200) {
                                layer.msg('删除成功', {
                                    time: 2000
                                });
                            } else {
                                layer.msg(result.message, {
                                    time: 2000
                                });
                            }
                        },
                        error: function (result) {
                            layer.msg(result.message, {
                                time: 2000
                            });
                        }
                    })
                    parent.layer.close(index);//关闭当前弹窗
                    table.reload('rolelist');//重载表格
                    // window.parent.location.reload();
                    // obj.del();s
                    // layer.close(index);
                });
            } else if (obj.event === 'edit') {
                updateRole = data;
                layer.open({
                    type: 2,
                    title: '修改角色',
                    anim: 2,
                    area: ['300px', '500px'],
                    content: "/user-role/updaterole"
                })

            }
        });
        $('.demoTable .layui-btn').on('click', function () {
            const type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


    })
</script>
</body>
</html>